<template>
  <div class="background_style" >
<div class="login_box">
  <h1>用户注册</h1>
<el-form :model="addSignInModel" :rules="rules" ref="addSignInRef" label-width="80px" class="login_form">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addSignInModel.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addSignInModel.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="密码确认" prop="password2">
          <el-input v-model="addSignInModel.password2" type="password"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="addSignInModel.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addSignInModel.email"></el-input>
        </el-form-item>
              <el-form-item class="btns">
             <el-button type="primary" @click=" insertDanger">注册</el-button>
              <el-button type="danger" @click="backLogin">返回</el-button>
          </el-form-item>
      </el-form>

</div>

  </div>
</template>

<script>
   export default {
      data() {
        //校验邮箱规则 rule校验规则   value校验的数据   callback回调函数
        const checkEmail = (rule, value, callback) => {
          //定义邮箱的正则表达式  JS中用/来表示正则表达式的开始和结束
          const emailRege = /^[a-zA-Z0-9-_]+@[a-zA-Z0-9-_]+\.[a-zA-Z0-9-_]+$/
          //正则表达式语法校验  test(xx) 校验成功 返回true  校验失败返回false
          if (emailRege.test(value)) {
            //表示邮箱合法 正确返回
            return callback()
          }
          callback(new Error('请填写正确的邮箱地址'))
        }

        //校验手机号的邮箱规则
        const checkPhone = (rule, value, callback) => {

          //定义校验手机号的正则语法
          const phoneRege = /^1[34578][0-9]{9}$/
          if (phoneRege.test(value)) {

            return callback()
          }
          callback(new Error('请填写正确的手机号'))

        }

        const checkPassword = (rule, value, callback) => {
          if (this.addSignInModel.password !== value) return callback(new Error('2次密码输入不一致'))
          //否则校验成功
          callback()
        }

        return {
          addSignInModel: {
            username: '',
            password: '',
            password2: '',
            email: '',
            phone: ''
          },
          rules: {
            username: [{
                required: true,
                message: '请输入用户名',
                trigger: 'blur'
              },
              {
                min: 3,
                max: 30,
                message: '长度在 3 到 30 个字符',
                trigger: 'blur'
              }
            ],
            password: [{
                required: true,
                message: '请输入密码',
                trigger: 'blur'
              },
              {
                min: 3,
                max: 30,
                message: '长度在 3 到 30 个字符',
                trigger: 'blur'
              }
            ],
            password2: [{
                required: true,
                message: '请输入密码',
                trigger: 'blur'
              },
              {
                min: 3,
                max: 30,
                message: '长度在 3 到 30 个字符',
                trigger: 'blur'
              },
              {
                validator: checkPassword,
                trigger: 'blur'
              }
            ],
            phone: [{
                required: true,
                message: '请输入手机号',
                trigger: 'blur'
              },
              {
                min: 3,
                max: 30,
                message: '长度在 3 到 30 个字符',
                trigger: 'blur'
              },
              {
                validator: checkPhone,
                trigger: 'blur'
              }
            ],
            email: [{
                required: true,
                message: '请输入邮箱',
                trigger: 'blur'
              },
              {
                min: 3,
                max: 30,
                message: '长度在 3 到 30 个字符',
                trigger: 'blur'
              },
              {
                validator: checkEmail,
                trigger: 'blur'
              }
            ]
          },
}

},
methods: {
  insertDanger(){
this.$http.post('/SignIn/addSignIn',this.addSignInModel).then(
res=>{})
this.$message.success("注册成功")
this.$router.push('/login')
  },
  backLogin(){
    this.$router.push('/login')
  }

}
    }
</script>

<style>

  .background_style{
  width:100%;
  height:85%;
  position:fixed;
  background-size:100% 100%;
  background-repeat: no-repeat;
 background-image: url("../assets/bj2.jpg");
  width:100%;
  height:inherit;

  }
  .login_form {
    position: absolute;
    bottom: 100px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .login_box {

    width: 450px;
    height: 100%;
   background-color: #FFFFFF;
    opacity: 1;
    /* 设定圆弧角*/
    border-radius: 10px;
    position: absolute;
    left: 86%;
    top: 50%;
    transform: translate(-50%, -50%);

}


</style>
